<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- 引入相应的库 -->
  <script src="/lib/react.js"></script>
  <script src="/lib/react-dom.js"></script>
  <script src="/lib/babel.js"></script>

  <script type="text/babel">

    class App extends React.Component {
      // 定义一个组件 组件首字母必须大写
      constructor() {
        super(); // 调用父类构造函数
        this.state = {
          // 初始化状态
          message: "hello world",
        };
      }

      // 定义方法
      changeText() {
        this.setState({
          message: "hello react",
        });
      }

      // this.changeText.bind(this)  调用方法，注意这里必须要显示的绑定this。否则方法里面的this是undefined
      render() {
        // 渲染组件
        return (
          // JSX  必须有一个父元素
          <div>
            <div>{this.state.message}</div>
            <button onClick={this.changeText.bind(this)}>修改文本</button>
          </div>
        );
      }
    }

    const rootEl = document.getElementById("root");
    const root = ReactDOM.createRoot(rootEl);
    root.render(<App />); // render()中可以渲染组件和普通元素
  </script>
</html>
